<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Variable01 />
    <Comments />
    <Importing />
    <Scope />
    <Nesting />
    <Mixin />
    <Operation />
    <Escaping />
    <Function />
    <Namespace />
    <Maps />
  </div>
</template>

<script>

import Variable01 from './components/Variable01.vue'
import Comments from './components/Comments.vue'
import Importing from './components/Importing.vue'
import Scope from './components/Scope.vue'
import Nesting from './components/Nesting.vue'
import Mixin from './components/Mixin.vue'
import Operation from './components/Operation.vue'
import Escaping from './components/Escaping.vue'
import Function from './components/Function.vue'
import Namespace from './components/Namespace.vue'
import Maps from './components/Maps.vue'

export default {
  name: 'App',
  components: {
    Variable01,
    Comments,
    Importing,
    Scope,
    Nesting,
    Mixin,
    Operation,
    Escaping,
    Function,
    Namespace,
    Maps,
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
